<template>
    <nav class="nav">
        <router-link to="/money/labels" class="item" exact-active-class="selected">
            <Icon  name="labels"/>
            标签
        </router-link>
        <router-link to="/money" class="item" exact-active-class="selected">
            <Icon  name="money"/>
            记账
        </router-link>
        <router-link to="/money/details" class="item" exact-active-class="selected">
            <Icon  name="details"/>
            明细
        </router-link>
    </nav>
</template>

<script lang="ts">
    // import整个icon文件夹
    const importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
    try {
    importAll(require.context('../assets/icons', true, /\.svg$/));
    } catch (error) {
        console.log(error);
    }
    
    export default {
        name:'Nav'
    }
</script>

<style lang="scss" scoped>
@import "~@/assets/style/helper.scss";
     nav {
         bottom:0;
         width:100%;
         display: flex;
         background-color: #FFE4A8;
         justify-content: space-around;
         >.item {
             width: 25%;
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
             font-size:12px;
             padding:10px 0;
         }
         >.item.selected {
             background-color: $color-highlight;
         }

     }
</style>